<template>
  <Right_menu></Right_menu>
  <HHead></HHead>
<div class="shopping_main_box">

<div class="shopping_show_box">
  <div class="shopping_speech_box" v-if="shopping_list.length > 0">千万不要为便宜而买下你不需要的东西,它会让你付出昂贵的代价</div>
  <div class="shopping_speech_box" style="color: #99a9bf" v-else>空...或许这世间，仍未找到所爱</div>
  <div class="shoppingcar_ul_box" v-if="shopping_list.length > 0">
    <ul class="shoppingcar_ul" v-for="(item, index) in shopping_list" :key="index">
      <li class="shoppingcar_li">
        <div class="shoppingcar_li_box" >
          <input type="checkbox" :checked="item.goods_state" @click="changeGoodState(item)" >
          <img :src="item.goods_small_logo" class="shoppingcar_img" alt="" @error="handleImageError">
          <div class="shoppingcar_introduce_box">
            <div class="shoppingcar_introduce_theme">商品名</div>
            <div class="shoppingcar_introduce">{{ item.goods_name }}</div>
          </div>
          <div class="shoppingcar_select_box">
            <div class="shoppingcar_select_theme">您所喜</div>
            <div class="shoppingcar_select">XXL</div>
          </div>
          <div class="shoppingcar_select_money_box">
            <div class="shoppingcar_select_money_theme">单价</div>
            <div class="shoppingcar_select_money" style="color: #f40;font-weight: 900">￥{{ item.goods_price }}</div>
          </div>
          <!--        数量框-->
          <div class="shoppingcar_number_box">
            <button class="shoppingcar_number_add_botton" @click="GoodCountAdd(item)">+</button>
            <input type="text" pattern="\d*" :value="item.goods_count" @input="inputGoodsCount($event,item)">
            <button class="shoppingcar_number_out_botton" @click="GoodCountReduce(item)">-</button>
          </div>
          <!--          最终金额-->
          <div class="shoppingcar_select_money_box">
            <div class="shoppingcar_select_money_theme">结算金额</div>
            <div class="shoppingcar_select_money" style="color: #f40;font-weight: 900">￥{{ updateGoodsMoney(item) }}</div>
          </div>
          <!--          删除按钮-->
          <div class="shoppingcar_delete_box" @click="goOutCart(item)">移出<i class="iconfont icon-gouwuche" title="购物车"></i></div>
        </div>
      </li>
      </ul>
    <div class="shoppingcar_all_select_box">
      <div class="shopping_all_select_left_box">
        <div class="shoppig_all_select">
          <input type="checkbox" name="" id="" @click="clickChangeAllGoodState" :checked="shopping_car_all_state">
          <div class="shoppingcar_all_select_text">全选</div>
        </div>
        <div class="shoppingcar_select_things_button" @click="goOutShoppingCar">
          <div class="shoppingcar_select_delect">移出<i class="iconfont icon-gouwuche" title="购物车"></i></div>
        </div>
      </div>
      <div class="shopping_all_select_right_box">
        <div class="shoppingcar_select_things_number">已选商品
          <div class="shoppingcar_select_things_number_show">{{ this.getSelectCount }}</div>
          件
        </div>
        <div class="shoppingcar_select_things_money">
          合计（不含运费）:
          <div class="shoppingcar_select_things_money_show">{{ totalMoney }}</div>
        </div>
        <div class="shoppingcar_all_select_Settlement">
          结算
        </div>
      </div>
    </div>
  </div>
    <div class="shoppingCarListShow"  v-else>
      我变成了一片宁静的荒野，连一只虚拟蝴蝶都没有。
  </div>

</div>
</div>
</template>

<script>
import Right_menu from "@/pages/SHOP/components/right_menu";
import { mapState,mapMutations,mapGetters } from 'vuex';
import HHead from "@/components/HHead";

export default {
  name: "ShoppingCar",
  data() {
    return {
      //购物车全选的状态
      all_select_state:false,
    }
  },
  computed: {
    ...mapState(['shopping_list',]),
    ...mapGetters(['getShoppingCarNumber','getSelectCount']),
    //    更新购物车商品目前的单个结算金额
    totalMoney() {
      return this.$store.getters.getAllGoodsMoney;
    },
  // 购物车全选商品的状态
    shopping_car_all_state(){
      return this.getShoppingCarNumber === this.getSelectCount
    }
  },
  methods:{
    ...mapMutations(['goOutCart','updateGoodsCount','changeGoodState','changeAllGoodState','goOutShoppingCar']),
    //  图片加载不出来的默认值
    handleImageError(event) {
      event.target.src =
          "http://img.moehot.com/img/2018/04/28/0006/W6YZE5Y7Q844KJ58B3QGBJZ4R.jpg_249x249";
    },
    //改变全部商品的状态
    clickChangeAllGoodState() {
      this.changeAllGoodState(!this.shopping_car_all_state)
    },
    inputGoodsCount(event, goods){
        goods.goods_count = Number(event.target.value.replace(/\D/g, ''));
      console.log(event.target.value.replace(/\D/g, ''))
    },
    updateGoodsMoney(goods){
      return goods.goods_count * goods.goods_price
    },
  //  购物车的数量减少
    GoodCountAdd(good){
      good.goods_count +=1
      this.updateGoodsCount(good)
    },
    //  购物车的数量减少
    GoodCountReduce(good){
      if(good.goods_count >0 ){
        good.goods_count -= 1
      }else {
        good.goods_count = 0
      }
      this.updateGoodsCount(good)
    }
  },
  components: {
    HHead,
    Right_menu,
  }
}
</script>

<style scoped>

</style>
